<!-- 修改密码 -->
<template>
  <div  class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <div class="top topSubmitBtn">
        <div class="title">修改密码</div>
        <el-button type="primary" @click="submit()">保存设置</el-button>
      </div>
      <div class="content">
        <el-col>
          <el-form :model="passwordform" ref="passwordform" :rules=rules label-width="120px">
            <el-form-item label="旧密码:" prop="OldPwd">
              <el-input size="mini" v-model="passwordform.OldPwd" maxlength="16" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="新密码:" prop="NewPwd">
              <el-input size="mini" v-model="passwordform.NewPwd" type="password" maxlength="16" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="confirmPassword">
              <el-input size="mini" v-model="passwordform.confirmPassword"  type="password" maxlength="16" show-word-limit></el-input>
            </el-form-item>
            <!-- <div style="text-align:right">
              <el-button type="primary" @click="submit()">保存</el-button>
            </div> -->
          </el-form>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import { connrequest } from '@/api/firstPage'
export default {
  data() {
    return {
      passwordform:{
        OldPwd: '',
        NewPwd: '',
        confirmPassword: ''
      },
      rules:{
        OldPwd: [ 
          { required: true, message:'旧密码不能为空' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        NewPwd: [ 
          { required: true, message:'新密码不能为空' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        confirmPassword: [ 
          { required: true, message:'确认密码不能为空' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      },
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    submit(){
      this.$refs['passwordform'].validate(async (valid) => {
        if (valid) {
          if(this.passwordform.NewPwd === this.passwordform.OldPwd){
            this.$message.error('新密码不能和旧密码一样')
          }else if(this.passwordform.NewPwd !== this.passwordform.confirmPassword){
            this.$message.error('两次密码输入内容不一致')
          }else{
            const data = {
              Data:{
                NewPwd: this.passwordform.NewPwd,
                OldPwd: this.passwordform.OldPwd
              }
            }
            const res = await connrequest('ModifyPwd', data)
            if(res.Status.StatusCode === 0) {
              this.$alert('密码已经修改，请重新登录', '修改密码', {
                confirmButtonText: '确定',
                callback: action => {
                  this.$store.dispatch('user/resetToken').then(() => {
                    location.reload()
                  })
                }
              });
            }
          }
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.content{
  width: 500px;
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  svg{
    font-size: 40px;
  }
  p{
    width: 350px;
    line-height: 30px;
    padding: 0 20px;
  }
}
.topSubmitBtn{
  width: 500px;
  justify-content: space-between;
}
</style>